<template>
  <div class="wechat-pay-config">
    <el-alert
      :closable="false"
      :title="$t('system.wechatPayment.note')"
      type="error"
    ></el-alert>
    <el-form
      ref="wxPayEnvConfig"
      :model="form"
      class="mt10"
      label-width="180px"
    >
      <el-form-item
        :rules="[{ required: true, message: $t('system.wechatPayment.appId'), trigger: 'blur' }]"
        label="appId"
        prop="appId"
      >
        <el-input
          v-model="form.appId"
          :placeholder="$t('system.wechatPayment.officialAccountAppId')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('system.wechatPayment.merchantId')"
        :rules="[
          {
            required: true,
            message: $t('system.wechatPayment.enterMerchantId'),
            trigger: 'blur'
          }
        ]"
        prop="mchId"
      >
        <el-input
          v-model="form.mchId"
          :placeholder="$t('system.wechatPayment.enterMerchantId')"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        :label="$t('system.wechatPayment.merchantKey')"
        :rules="[
          {
            required: true,
            message: $t('system.wechatPayment.enterMerchantKey'),
            trigger: 'blur'
          }
        ]"
        prop="mchKey"
      >
        <el-input
          v-model="form.mchKey"
          :placeholder="$t('system.wechatPayment.enterMerchantKey')"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-form-item
        :label="$t('system.wechatPayment.callbackUrl')"
        :rules="[
          {
            required: true,
            message: $t('system.wechatPayment.enterCallbackUrl'),
            trigger: 'blur'
          }
        ]"
        prop="notifyUrl"
      >
        <el-input
          v-model="form.notifyUrl"
          :placeholder="$t('system.wechatPayment.enterCallbackUrl')"
        />
      </el-form-item>
      <el-form-item
        :rules="[{ required: true, message: '请上传证书文件', trigger: 'change' }]"
        label="证书文件"
        prop="keyString"
      >
        <div v-if="form.keyString">
          <el-tag type="success">已上传证书</el-tag>
          <el-button
            class="ml10"
            link
            type="primary"
            @click="handleReupload"
          >
            重新上传
          </el-button>
        </div>
        <el-upload
          v-else
          :auto-upload="false"
          :limit="1"
          :on-change="handleFileChange"
          accept=".p12"
          action="#"
          class="upload-demo"
        >
          <el-button type="primary">选择证书文件</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传 p12 格式的证书文件</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          {{ $t("formI18n.all.save") }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ConfigMixin from "./ConfigMixin";

export default {
  name: "wxPayEnvConfig",
  mixins: [ConfigMixin],
  data() {
    return {};
  },
  computed: {},
  async created() {
    this.activeName = "wxPayEnvConfig";
    await this.handleClick();
  },
  mounted() {},
  methods: {
    handleFileChange(file) {
      const reader = new FileReader();
      reader.onload = e => {
        this.form.keyString = e.target.result.split(",")[1];
      };
      reader.readAsDataURL(file.raw);
    },
    handleReupload() {
      this.form.keyString = "";
    }
  }
};
</script>
<style scoped>
.wechat-pay-config {
  width: 100%;
}

.mt10 {
  margin-top: 10px;
}

.ml10 {
  margin-left: 10px;
}
</style>
